<template>
  <div class="start-proc-legend">

    <div class="jazz-timeline-wrapper">
      <div class="jazz-timeline  multiline-timeline ">
        <div class="timeline-post " :class="[task.typeClass]" v-for="(task,index) in procTaskData">
          <div class="timeline-meta">
            <div class="meta-details">{{ autoInterceptFormatDate(task) }}
              <span>{{ task.handlerState === 10 ? '（当前）' : '' }}</span></div>
          </div>
          <div class="timeline-icon icon-dot">
            <div class="timeline-bar"></div>
          </div>
          <div class="timeline-content">
            <h2 class="content-title turqoise-title"> {{ task.taskName }}<span
                v-if="task.handlerState>10">({{ getUserSimperName(task.handlerUser) }})</span></h2>
            <div class="content-details">
              <p>
                {{ task.authComment ? '审批备注：' + task.authComment : '' }}&nbsp;
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


import startFormatUilts from "utils/startFormatUilts";

export default {
  name: "startActProcLegend",
  components: {},
  filters: {},
  props: {},
  computed: {},
  data() {
    return {
      procTaskData: []
    }
  },
  watch: {},
  created() {
  },
  methods: {
    init(procModel) {
      let procTask = [];
      let start = {};
      start.taskName = '发起申请';
      start.handlerUser = procModel.startUser;
      start.createTime = procModel.startTime;
      start.handlerState = 20;
      start.typeClass = this.getTaskItemTheme(start)
      start.hideComment = true
      procTask.push(start)
      for (let i = 0; i < procModel.procTasks.length; i++) {
        let item = procModel.procTasks[i]
        item.hideComment = false;
        item.typeClass = this.getTaskItemTheme(item)
        procTask.push(item)
      }
      let end = {};
      end.taskName = '审批通过';
      end.handlerUser = {};
      end.createTime = procModel.startTime;
      end.handlerState = procModel.procState === 10 ? 0 : procModel.procState;
      end.typeClass = this.getTaskItemTheme(end)
      end.hideComment = true
      procTask.push(end)
      procTask = procTask.reverse();
      this.procTaskData = procTask;
    },
    getTaskItemTheme(task) {
      if (task.handlerState === 10) {
        return "blue-post"
      } else if (task.handlerState === 80) {
        return "orange-post"
      } else if (task.handlerState === 20) {
        return "green-post"
      } else if (task.handlerState === 90) {
        return "red-post"
      } else {
        return "grey-post"
      }
    },

    getUserSimperName(startBaseUser) {
      if (!startBaseUser) {
        return ''
      }
      let userName = startBaseUser.userFinalName || "";
      if (userName.length < 3) {
        return userName;
      }
      return userName.substring(0, 2)

    },
    autoInterceptFormatDate(task) {
      if (task.handlerState <= 10) {
        return "待审批"
      }
      if (task.authDateTime) {
        return startFormatUilts.autoInterceptFormatDate(task.authDateTime);
      }
      return startFormatUilts.autoInterceptFormatDate(task.createTime)

    },


  }
}
</script>

<style scoped lang="scss">
@use "start-proc-legend";
</style>
